<!DOCTYPE html>
<html lang='zh-cn'>
    <head>
    <meta charset='UTF-8' />
    <meta name='viewport' content='width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' />
    <meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1' />
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <!--[if lt IE 9]>
    <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <link rel="stylesheet" href="css/switchery.min.css" />
    <title>Document</title>
    </head>
    <body>
        WIFI<input type="checkbox" class="js-switch js-switch-blue" checked />
        数据<input type="checkbox" class="js-switch" checked />
        飞行模式<input type="checkbox" class="js-switch" checked />
        静音<input type="checkbox" class="js-switch" checked />
        禁用readonly<input type="checkbox" readonly="readonly" class="js-switch" checked />
        禁用disabled<input type="checkbox" disabled="disabled" class="js-switch" checked />
        禁用option<input type="checkbox" class="js-switch js-switch-disabled" checked />
        正常<input type="checkbox" class="js-switch js-switch-normal" checked />
        large<input type="checkbox" class="js-switch js-switch-large" checked />
        small<input type="checkbox" class="js-switch js-switch-small" checked />
        <button id="getSmallStatus">获取small的状态</button>
        <button class="js-check-click-button">获取选中的状态</button>
        <div class="container">
            动态开关<input type="checkbox" name="dynamicCheckbox" class="js-switch" id="dynamicCheckbox" /><button id="enable">启用</button><button id="disabled">禁用</button>
        </div>
        <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
        <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <script src="js/switchery.min.js"></script>
        <script>
        // defaults = {
        //     color             : '#64bd63',            //开关元件的颜色(十六进制或RGB值)
        //     secondaryColor    : '#dfdfdf',            //次要的背景颜色和边框的颜色,当开关是关闭的
        //     jackColor         : '#fff',               //抬起/按下元素的默认颜色
        //     jackSecondaryColor: null,                 //第二抬起/按下元素的默认颜色
        //     className         : 'switchery',          //开关元件的类名(默认样式switchery.css)
        //     disabled          : false,                //启用或禁用单击事件和改变开关的状态(布尔值)
        //     disabledOpacity   : 0.5,                  //不透明度，当不可见时为true(范围0-1)
        //     speed             : '0.1s',               //转型需要的时间长度,动画效果长度。
        //     size              : 'default'             //样式的大小（small or large）
        // }
        // 1.单个checkbox
        // var elem = document.querySelector('.js-switch-blue');
        // var init = new Switchery(elem,{color:"blue"});
        // clickButton=document.querySelector(".js-check-click-button");
        // clickButton.addEventListener('click',function(){
        //     alert(elem.checked);
        //     alert($(elem).attr("checked") === "checked");
        // })
        // 2.多个checkbox
        // var elems=Array.prototype.slice.call(document.querySelectorAll(".js-switch"));
        // elems.forEach(function(value,index){
        //     // alert(value.dataset.switchery)
        //     // alert(value.getAttribute("data-switchery"))
        //     if(value.getAttribute("data-switchery") !== "true"){
        //         var switchery=new Switchery(value,{color:"#f00"});
        //     }
        // })
        var elemDisabled=document.querySelector(".js-switch-disabled"),
            elemNormal=document.querySelector(".js-switch-normal"),
            elemSmall=document.querySelector(".js-switch-small"),
            elemLarge=document.querySelector(".js-switch-large"),
            getSmallStatus=document.querySelector("#getSmallStatus"),
            dynamicCheckbox=document.querySelector("#dynamicCheckbox");
        // var switchDisabled=new Switchery(elemDisabled,{disabled:true,disabledOpacity:0.75})
        // 3.设置禁用disabled
        var switchery = new Switchery(elemDisabled, { disabled: true, disabledOpacity: 0.75 });
        // 4.设置开关的颜色
        // var switcheryNormal = new Switchery(elemNormal);
        // var switcheryNormal = new Switchery(elemNormal, { color: '#7c8bc7', jackColor: '#9decff' });
        var switchery = new Switchery(elemNormal, { color: '#faab43', secondaryColor: '#fC73d0', jackColor: '#fcf45e', jackSecondaryColor: '#c8ff77' });
        // 5.设置开关的大小
        var switcherySmall = new Switchery(elemSmall, { size: 'small' });
        var switcheryLarge = new Switchery(elemLarge, { size: 'large' });
        // 5.监听click，change事件
        getSmallStatus.addEventListener("click",function(){
            alert("click事件"+elemSmall.checked)
        });
        // getSmallStatus.onclick=function(){
        //     alert("click事件",elemSmall.checked)
        //     alert(elemSmall.checked)
        // }
        elemLarge.addEventListener("change",function(){
            alert("change事件",elemLarge.checked)
        });
        var SwitchDynamicCheckbox=new Switchery(dynamicCheckbox);
        document.querySelector('#enable').onclick=function(){
            SwitchDynamicCheckbox.enable();
        }
        document.querySelector('#disabled').onclick=function(){
            SwitchDynamicCheckbox.disable();
        }
        </script>
    </body>
</html>